<script setup>
import { onMounted, ref } from 'vue'
import { getHospitalizationRecordList } from '@/api/hospitalizationRecord'
import { addPatient } from '@/api/patient'
import { ElMessage } from 'element-plus'
import { useStatusStore } from '@/stores/modules/status'

const statusStore = useStatusStore()

// 表单数据
const form = ref({
  name: '',
  gender: '',
  phoneNumber: '',
  deptId: '',
  admissionTime: '',
  diagnosis: '',
  address: ''
})

// 科室列表
const departments = ref({
  儿科: 3,
  内科: 1,
  外科: 2,
  妇产科: 4,
  神经科: 6,
  骨科: 5
})

// 提交表单
const handleSubmit = async () => {
  console.log(form.value)
  const res = await addPatient(form.value)
  handlePageQuery()

  statusStore.setComponentKey(statusStore.componentKey + 1)

  ElMessage.success(res.msg)

  // 重置表单
  Object.keys(form.value).forEach((key) => {
    form.value[key] = ''
  })
}

// 入院记录
const records = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
onMounted(async () => {
  handlePageQuery()
})

const handlePageQuery = async () => {
  const res = await getHospitalizationRecordList({
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })

  records.value = res.data.records
  total.value = res.data.total
}
</script>

<template>
  <div class="admission">
    <h2>入院登记</h2>

    <!-- 入院登记表单 -->
    <overview-card class="form-container">
      <h3>登记表</h3>
      <el-form label-width="8rem" class="form-content">
        <el-form-item label="姓名" required>
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" required>
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input v-model="form.phoneNumber" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="地址" required>
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="科室" required>
          <el-select v-model="form.deptId" placeholder="请选择科室">
            <el-option label="儿科" :value="departments['儿科']" />
            <el-option label="内科" :value="departments['内科']" />
            <el-option label="外科" :value="departments['外科']" />
            <el-option label="妇产科" :value="departments['妇产科']" />
            <el-option label="神经科" :value="departments['神经科']" />
            <el-option label="骨科" :value="departments['骨科']" />
          </el-select>
        </el-form-item>
        <el-form-item label="诊断信息" required>
          <el-input v-model="form.diagnosis" placeholder="请输入诊断信息" />
        </el-form-item>
        <el-form-item label="入院时间" required>
          <el-date-picker
            v-model="form.admissionTime"
            type="datetime"
            placeholder="选择日期"
            format="YYYY/MM/DD hh:mm"
            value-format="YYYY-MM-DD hh:mm"
            style="width: 100%"
          />
        </el-form-item>

        <Button class="btn-submit" @click.prevent="handleSubmit" text="提交">
        </Button>
      </el-form>
    </overview-card>

    <!-- 入院记录列表 -->
    <overview-card class="records-container">
      <h3>入院记录</h3>
      <el-table
        :data="records"
        border
        stripe
        style="width: 100%"
        height="60rem"
      >
        <el-table-column prop="patientId" label="病案号" />
        <el-table-column prop="name" label="病人姓名" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="phoneNumber" label="联系电话" />
        <el-table-column prop="deptName" label="所在科室"> </el-table-column>
        <el-table-column
          prop="admissionTime"
          label="入院时间"
        ></el-table-column>
        <el-table-column prop="wardId" label="病房号"></el-table-column>
        <el-table-column prop="bedId" label="床位号"></el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 500]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageQuery"
        @current-change="handlePageQuery"
      />
    </overview-card>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;
@use 'sass:color';

.admission {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;

  /* 表单样式 */
  .form-container {
    &:hover {
      transform: none;
    }

    .form-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
      gap: 2rem;
      margin-top: 4rem;

      :deep(.el-form-item) {
        position: relative;
      }

      :deep(.el-form-item__label) {
        font-size: 1.2rem;
        position: absolute;
        top: -3rem;
        justify-content: flex-start;
      }
    }

    .btn-submit {
      grid-row: 5/6;
      grid-column: 2/3;
      width: 30%;
      justify-self: end;
      margin-top: -1rem;

      padding: 1rem;

      &:hover {
        background-color: color.adjust($color-primary-dark-2, $lightness: -10%);
      }
    }
  }

  /* 入院记录表格样式 */
  .records-container {
    &:hover {
      transform: none;
    }
    h3 {
      margin-bottom: 1.5rem;
    }

    .el-pagination {
      margin-top: 2rem;
      justify-self: center;
    }
  }
}
</style>
